<template>
  <van-overlay :show="show" z-index="10">
    <div class="h-full flex flex-col items-center justify-center">
      <div class="relative flex items-center justify-center">
        <img src="https://jwc-static.jdwxk.com/imgs/home/tickets/card.png" class="w-85%" alt="">
        <div class="absolute right-13 top-12">
          <img src="https://jwc-static.jdwxk.com/imgs/home/tickets/text.png" class="w-20" alt="">
        </div>
        <div
          class="absolute bottom-2.5% left-0 right-0 h-13% flex items-center justify-center text-4 text-#FCDAB1"
          @click="show = !show"
        >
          开始体验
        </div>
      </div>
      <div
        class="h-12 w-12 flex items-center justify-center border border-white rounded-full border-solid"
        @click="show = !show"
      >
        <div class="i-ep:close-bold text-7 text-white" />
      </div>
    </div>
  </van-overlay>
</template>

<script lang='ts' setup>
const show = defineModel('show', {
  default: false,
})
</script>

<style lang='less'>
.custom-field {
  padding: 0;
  height: 100%;
  background: transparent;

  .van-field__body {
    height: 100%;
  }

  .van-field__control {
    color: white;
    font-size: 16px;
  }
}
</style>
